---
title: Cloud
description: Integrate cloud functionality to enable seamless access to cloud-based resources.
component: true
docs:
  - route: /docs/cloud
    title: Cloud
---

## Installation

<Tabs defaultValue="cli">

<TabsList>
<TabsTrigger value="cli">CLI</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx @udecode/plate-ui@latest add cloud
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>

Install the following dependencies:

- [Cloud](/docs/cloud)

</Step>

<Step>

Copy and paste the following code into your project.

</Step>

<ComponentSource name="cloud-attachment-element" />
<ComponentSource name="cloud-image-element" />
<ComponentSource name="cloud-resize-controls" />
<ComponentSource name="cloud-status-bar" />
<ComponentSource name="cloud-toolbar-buttons" />

<Step>

Update the import paths to match your project setup.

</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

<ComponentPreview name="cloud-demo" padding="md" />

### Usage

```tsx
const plugins = createMyPlugins(
  [
    ...basicNodesPlugins,
    createCloudPlugin({
      options: {},
    }),
    createCloudAttachmentPlugin(),
    createCloudImagePlugin({
      options: {
        maxInitialWidth: 320,
        maxInitialHeight: 320,
        minResizeWidth: 100,
        maxResizeWidth: 720,
      },
    }),
  ],
  {
    components: {
      ...plateUI,
      [CloudAttachmentPlugin.key]: CloudAttachmentElement,
      [CloudImagePlugin.key]: CloudImageElement,
    },
  }
);
```

### Demo

```tsx
export default function CloudDemo() {
  return (
    <Plate<MyValue> plugins={plugins} initialValue={cloudValue}>
      <FixedToolbar>
        <CloudToolbarButtons />
      </FixedToolbar>
      <Editor />
    </Plate>
  );
}
```
